<template>
    <el-menu @open="handleOpen" @close="handleClose" theme="dark" :router="true">
        <div v-for="item in menus">
            <el-submenu :index="item.path" v-if="item.children">
                <template slot="title">{{item.name}}</template>
                <sideMenu :menuitems="item.children"></sideMenu>
            </el-submenu>
            <el-menu-item :index="item.path" v-else>{{item.name}}</el-menu-item>
        </div>
    </el-menu>
</template>
<script>
    export default{
        name: "sideMenu",
        props: {
            menuitems: {
                type: Array, default: []
            }
        },
        data(){
            return {
                menus: this.menuitems
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>